<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <base href="/SSMSD/">
    <!-- bootstrap的css核心，定义了很多的class -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <!-- 生成弹框、提示框、下拉菜单的 -->
    <script type="text/javascript" src="assets/js/popper.min.js"></script>
    <!-- bootstrap的js，用于响应事件 -->
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Rgx/css/hotel.css"/>
    <!--引入bootstrap-table样式  -->
    <link href="Rgx/css/bootstrap-table.css" rel="stylesheet">
    <!-- bootstrap-table.min.js -->
    <script src="Rgx/js/bootstrap-table.js"></script>
    <!-- 引入中文语言包 -->
    <script src="Rgx/js/bootstrap-table-zh-CN.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 弹窗 -->

</head>
<body>

<div>
    <div>
        <div id="a2">
            <div id="a2-1">
                <div class="col-*-12">
                    <table id="mytab" class="table table-hover"></table>
                </div>

            </div>
            <div id="a2-2">

                <div id="a2-2-1">
                    <!--触发器-->
                    <!-- <button class="btn-primary" data-toggle="modal" data-target="#mymodal">我是按钮,来点我</button> -->
                    <!--维修  -->
                    <div id="img0"></div>
                    <div id="img1"></div>
                    <div id="img2"></div>


                    <!-- <button id="lookroom">查看房间信息</button><br><br> -->
                    <!-- <button id="roomthing">办理入住</button><br><br>	 -->

                </div>
                <div id="a2-2-3">
                    <!-- <iframe class="map" src="Map.html" frameborder="0" scrolling="no"  style="width:350px;height:190px;"></iframe> -->


                </div>

            </div>
        </div>


    </div>
    <button id="finbutton" class="btn btn-success">提交房间
        <span class="glyphicon glyphicon-print"></span>
    </button>
    <button id="lookhotel" class="btn btn-success">查看客房图片
        <span class="glyphicon glyphicon-print"></span>
    </button>
    <!-- <button id="lookevaluate" class="btn btn-success">查看客房评价
    <span class="glyphicon glyphicon-print" ></span>
    </button> -->
</div>

<!--弹窗 start -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                酒店详情
            </div>

            <div class="modal-body">
                <form id="findroom">
                    房间ID: <input type="text" name="roomid"><br><br>
                    所属酒店ID : <input type="text" name="hotelid"><br><br>
                    房间号: <input type="text" name="roomnum"><br><br>
                </form>
                <button id="findsubmit">提交</button>
                <br>

            </div>

            <div class="modal-footer">
                <button data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--弹窗 end -->


<script type="text/javascript">

    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }


    $(function () {

        //根据窗口调整表格高度
        $(window).resize(function () {
            $('#mytab').bootstrapTable('resetView', {
                height: tableHeight()
            })
        })
        /* findHotel */
        $('#mytab').bootstrapTable({
            url: "/SSMSD/room/findAllRoomThisHotel",//数据源
            dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
            height: tableHeight(),//高度调整
            search: true,//是否搜索
            pagination: true,//是否分页
            pageSize: 5,//单页记录数
            pageList: [5, 10, 20, 50],//分页步进值
            sidePagination: "client",//前端分页
            contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
            dataType: "json",//期待返回数据类型
            method: "post",//请求方式
            searchAlign: "left",//查询框对齐方式
            queryParamsType: "limit",//查询参数组织方式
            queryParams: function getParams(params) {
                return {
                    hotelid: getQueryString("hotelid"),

                }
            },
            searchOnEnterKey: true,//回车搜索
            showRefresh: true,//刷新按钮
            showColumns: true,//列选择按钮
            buttonsAlign: "left",//按钮对齐方式
            toolbar: "#toolbar",//指定工具栏
            toolbarAlign: "right",//工具栏对齐方式
            columns: [
                {
                    title: "全选",
                    field: "select",
                    checkbox: true,
                    width: 20,//宽度
                    align: "center",//水平
                    valign: "middle"//垂直
                },
                {
                    title: "房间ID",//标题
                    field: "roomid",//键名
                    sortable: true,//是否可排序
                    order: "desc"//默认排序方式
                },
                {
                    field: "hotelid",
                    title: "所属酒店ID",
                    sortable: true,
                    titleTooltip: "this is name"
                },

                {
                    field: "rt",
                    title: "房间类型",

                },
                {
                    field: "roomtrait",
                    title: "房间特点",

                },
                {
                    field: "roomprice",
                    title: "房间价格",

                },

            ],
            onClickRow: function (row, $element) {
                alert(getQueryString("hotelid"));
                $element.css("background-color", "green");
            },//单击row事件
            locale: "zh-CN", //中文支持
            detailView: false, //是否显示详情折叠
            detailFormatter: function (index, row, element) {
                var html = '';
                $.each(row, function (key, val) {
                    html += "<p>" + key + ":" + val + "</p>"
                });
                return html;
            }
        });


        /*   ,function (row1){ return row1;} */
        $("#finbutton").click(function () {
            //获取复选框
            var as = $("#mytab").bootstrapTable('getSelections', function (row) {
                return row;
            });
            alert("jjjjjjjjjjj" + JSON.stringify(as));
            if (as.length <= 0) {
                alert("请选中一行")
            } else {
                var url = "/SSMSD/cars/savecars";
                $.ajax({
                    dataType: "json",
                    traditional: true,
                    data: {"as": JSON.stringify(as)},
                    type: "post",
                    url: url,
                    success: function (data) {
                        alert("成功！");
                        location.reload();
                    },
                    error: function (data) {
                        location.reload();
                    }
                });
            }
            /*  stringify(as) */
        });
        //查看客房照片
        $("#lookhotel").click(function () {
            //获取复选框
            var as = $("#mytab").bootstrapTable('getSelections', function (row) {
                return row;
            });

            alert(as[0].roomid);
            var b = as[0].roomid;

            if (as.length <= 0) {
                alert("请选中一行")
            } else {
                var url = "/SSMSD/imgs/findRoomImgs";
                $.ajax({
                    dataType: "json",
                    traditional: true,
                    data: as[0],
                    type: "post",
                    url: url,
                    success: function (data) {
                        var img = {};
                        for (var i = 0; i < data.length; i++) {
                            img[i] = '<img src="' + data[i].imgaddr + '" >';
                            $("#" + "img" + i).html(img[i]);
                        }

                    },
                    error: function (data) {
                        alert("失败！");
                    }
                });

            }

        });
        //查看客房评价
        /*   $("#lookevaluate").click(function(){
                              //获取复选框
                              var as= $("#mytab").bootstrapTable('getSelections',function (row){
                                  return row;
                              });

                              alert(as[0].roomid);
                              var b=as[0].roomid;

                               if(as.length<=0){
                                   alert("请选中一行")
                              }else{
                                   var url="/SSMSD/evaluate/findEvaluateRoom";
                                     $.ajax({
                                         dataType: "json",
                                         traditional:true,
                                         data:as[0],
                                         type: "post",
                                         url: url,
                                         success : function (data) {
                                             var img={};
                                             for(var i=0;i<data.length;i++){
                                                 img[i]='<img src="'+data[i].imgaddr+'" >';
                                                 $("#"+"img"+i).html(img[i]);
                                             }

                                         },
                                         error : function (data){
                                             alert("失败！");
                                         }
                                     });

                              }

                          }); */


        $("#addRecord").click(function () {
            alert("name:" + $("#name").val() + " age:" + $("#age").val());
        });
    })

    function tableHeight() {
        return $(window).height() - 300;
    }

    /**
     * 列的格式化函数 在数据从服务端返回装载前进行处理
     * @param  {[type]} value [description]
     * @param  {[type]} row   [description]
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    function infoFormatter(value, row, index) {
        return "id:" + row.id + " name:" + row.name + " age:" + row.age;
    }

    /* /SSMSD/hotel/findHotel */


</script>
</body>
</html>